<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="jqury/jquery-3.3.1.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap/bootstrap-theme.min.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">

</head>
<body>

<form class="form-inline" action="/addUser" id="form" method="post"  enctype = "multipart/form-data">
    <input type="hidden" th:value="${session.user.id}" name="id">
    <div class="form-group">
        <label for="exampleInputName2">用户名</label>
        <input type="text" name="username" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">用户密码</label>
        <input type="text" name="password" class="form-control" id="exampleInputEmail2"
               placeholder="jane.doe@example.com">
    </div>

    <div class="form-group">
        <span id="fileSpan">
            <input type="file" name="file"/>
            <a id="delFile" style="cursor:pointer;color: red">删除该文件</a>
        <br>
        </span>
        <a id="addFile" style="cursor:pointer;color: red">添加新文件</a>
        <br>
    </div>
    <a th:href="@{/logout}">退出用户</a>
    <button type="submit" class="btn btn-default">添加用户</button>
</form>
<table class="table table-hover">
    <!-- On cells (`td` or `th`) -->
    <thead>
    <tr>
        <td class="active">用户ID</td>
        <td class="success">用户名称</td>
        <td class="warning">用户密码e</td>
        <td class="danger">用户权限</td>
        <td class="info">操作</td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user:${users}">
        <td th:text="${user.id}" class="active"></td>
        <td th:text="${user.username}" class="success"></td>
        <td th:text="${user.password}" class="warning"></td>
        <td th:text="${user.role}" class="danger"></td>
        <td class="info">
            <a th:href="@{/user+{id}(id=${user.id})}">修改</a>
            <a th:href="@{/deleteUser+{id}+{page}+{pageSize}(id=${user.id},page=${pageInfo.pageNum},pageSize=${pageInfo.pageSize})}" id="delete">删除</a>
        </td>
    </tr>
    </tbody>
</table>
<!--显示分页信息部分代码-->
<div class="modal-footer">
    <div class="col-md-6">
        <strong>当前第[<span th:text="${pageInfo.pageNum}"></span>]页，共[<span th:text="${pageInfo.pages}"></span>]页，一共[<span th:text="${pageInfo.total}"></span>]条记录</strong>
    </div>
    <ul class="pagination pull-right">
        <li th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'users?pageNum=1'">首页</a>
        </li>
        <li class="prev" th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'users>pageNum='+${pageInfo.prePage}">
                <i></i>
            </a>
        </li>
<!--        遍历条数-->
        <li th:each = "nav:${pageInfo.navigatepageNums}">
            <a th:href="'users?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
            <span style="font-weight:bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}"></span>
        </li>
        <li class="next" th:if="${pageInfo.hasNextPage}">
            <a th:href="'users?pageNum='+pageInfo.nextPage">
                <i></i>
            </a>
        </li>
        <li>
            <a th:href="'users?pageNum='+${pageInfo.pages}">尾页</a>
        </li>
    </ul>
</div>

<form class="form-inline" action="/selectOne" method="get">
    <div class="form-group">
        <label for="exampleInputName3">用户id</label>
        <input type="text" name="id" class="form-control" id="exampleInputName3" placeholder="3">
    </div>
    <button type="submit" class="btn btn-default">查询用户</button>
</form>

<script>
    function mysubmit() {
        $.ajax({
            url:"/addUser",//请求url
            data:$("#form").serialize(),//请求参数
            async:true,//是否异步
            success:function f(result) {
                alert(result);
                alert(result.msg);
                window.confirm(result.msg);//新增用户成功提示框
                location.href = "users";//重新加载界面,同步数据库信息
            }
        });
    }

    $(function () {
        // $("#addFile").append("<input type='file' name='file' <a id='delFile' style='cursor:pointer;color: red'>删除该文件</a><br>");
        $("#delFile").click(function () {
            $($(this).next()).remove();
            $($(this).prev()).remove();
            ($(this)).remove();
        });

        $("#fileSpan").on("click","#delFile",function () {
            $($(this).next()).remove();
            $($(this).prev()).remove();
            ($(this)).remove();
        });
    })

</script>
09点00分
</body>
</html>